<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        body{
            font-family: "Microsoft YaHei";
        }
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        *{padding: 0;margin: 0;list-style-type:none}
        .main-content{
            width: 820px;
            height: 2000px;
            margin: 0 auto;
            border: solid 2px #FEE853;
            background: #cccccc;
        }

        .main-content ul{
            padding-bottom: 20px;
        }

        .main-content ul li{
            float: left;
        }

        .main-content ul li a{
            display: inline-block;
            width: 200px;
            height: 150px;
            border: solid 1px #FF3300;
            overflow: hidden;
        }

        .main-content ul li a img{
            width: 100%;
        }


        .facebox{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background:rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }


        #btnleft{
            position: fixed;
            top: 50%;
            left: 20px;
            margin-top: -15px;
            z-index: 1001;
            width: 60px;
            height: 60px;
            border-radius: 50px;
            text-align: center;
            line-height: 60px;
            font-size: 50px;
            font-weight: bold;
            background: #cccccc;
            color: #000;
            cursor: pointer;
        }


        #btnright{
            position: fixed;
            top: 50%;
            right: 20px;
            margin-top: -15px;
            z-index: 1001;
            width: 60px;
            height: 60px;
            border-radius: 50px;
            text-align: center;
            line-height: 60px;
            font-size: 50px;
            font-weight: bold;
            background: #cccccc;
            color: #000;
            cursor: pointer;
        }

        #btnclose{
            width: 30px;
            height: 30px;
            font-size: 22px;
            position: fixed;
            top: 30px;
            right: 30px;
            z-index: 1000;
            background: #cccccc;
            cursor: pointer;
            text-align: center;
            line-height: 30px;
            color: #000;
            border-radius: 30px;
        }

        .img-box{
            position: relative;
            width: 100%;
            height: 100%;
        }

        #bigImg{
            position: absolute;
        }

    </style>
    <script src="jquery-1.8.3.min.js"></script>
    <script src="main.js"></script>
</head>
<body class="details_body">
<div class="main-content ">
    <ul class="imgUl_pic0001 clearfix">
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img1.jpg"><img src="img1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img2.png"><img src="img2.png" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img3.jpg"><img src="img3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img4.jpg"><img src="img4.jpg" alt=""/></a></li>
    </ul>
   <ul class="imgUl_pic0001 clearfix">
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img3.jpg"><img src="img3.jpg" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img1.jpg"><img src="img1.jpg" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img2.png"><img src="img2.png" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img4.jpg"><img src="img4.jpg" alt=""/></a></li>
   </ul>
</div>

<div class="facebox">
    <span id="btnleft"><</span>
    <span id="btnright">></span>
    <span id="btnclose">x</span>
    <div class="img-box" id="map">
        <img id="bigImg" usemap="#Map"  src="" alt=""/>
      <!--  <map name="Map">
            usemap="#Map"
        </map>-->
    </div>
</div>


</body>
</html>